<template>
  <div>
    <TypeNav/>
    <!--list-content-->
    <div class="main">
      <div class="py-container">
        <SearchTag
            :trademarkName="searchUrl.trademark"
            :props="searchUrl.props"
            @removeQuery="removeQuery"
            @removeParams="removeParams"
            @removeTrademark="removeTrademark"
            @removeAttr="removeAttr"
        />
        <SearchSelector @trademarkUrl="trademarkUrl" @attrChildrenUrl="attrChildrenUrl"/>
        <SearchDetails
            @priceSort="priceSort"
            :pageNo="searchUrl.pageNo"
            :totalPages="totalPages"
            :total="total"
            :continuousPage="3"
            @toPageList="toPageList"
        />
        <SearchHot/>
      </div>
    </div>
  </div>
</template>

<script>
import SearchTag from "@/pages/Search/components/SearchTag";
import SearchSelector from "@/pages/Search/components/SearchSelector";
import SearchDetails from "@/pages/Search/components/SearchDetails";
import SearchHot from "@/pages/Search/components/SearchHot";
import {mapActions, mapGetters} from "vuex";

export default {
  name: 'Search',
  components: {SearchTag, SearchSelector, SearchDetails, SearchHot},
  data() {
    return {
      searchUrl: {   // 初始化的默认参数
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "",
        pageNo: 1,
        pageSize: 100,
        props: [],
        trademark: "",
      }
    }
  },
  mounted() {
    this.initSearchUrl()
    this.getSearchList(this.searchUrl)
  },
  methods: {
    ...mapActions('search', ['getSearchList']),

    // 因为我们是通过三级列表和搜索框进来的 所以 头一次发送请求肯定是这个两个参数之一
    // 1- 获取三级列表和搜索框参数
    initSearchUrl() {
      const {
        category1Id = '',
        category2Id = '',
        category3Id = '',
        categoryName = '',
      } = this.$route.query;   // 获取三级列表参数
      const {searchKey} = this.$route.params;  // 获取搜索框参数
      // 合并参数
      this.searchUrl = {
        ...this.searchUrl,
        category1Id,
        category2Id,
        category3Id,
        categoryName,
        keyword: searchKey
      }
    },
    // 2- 实现点击品牌搜索对应商品
    trademarkUrl(tm) {
      this.searchUrl.trademark = `${tm.tmId}:${tm.tmName}`;
      this.getSearchList(this.searchUrl)
    },
    // 3- 实现点击属性搜索对应商品
    attrChildrenUrl(attrUrl) {
      const {attrId, attrValue, attrName} = attrUrl;
      if (this.searchUrl.props.includes(`${attrId}:${attrValue}:${attrName}`)) return;
      this.searchUrl.props.push(`${attrId}:${attrValue}:${attrName}`)
      this.getSearchList(this.searchUrl)
    },
    // 4- 删除Tag内容面板的query参数 动态路由重新导航
    removeQuery() {
      const params = this.$route.params;
      this.$router.push({
        name: 'Search',
        params
      })
    },
    // 5- 删除Tag内容面板的params参数 动态路由重新导航
    removeParams() {
      const query = this.$route.query;
      this.$bus.$emit('removeIptValue')
      this.$router.push({
        name: 'Search',
        query
      })
    },
    // 6- 品牌的Tag内容面板的删除
    removeTrademark() {
      this.searchUrl.trademark = '';
      this.getSearchList(this.searchUrl)
    },
    // 7- 属性的Tag内容面板的删除
    removeAttr(item) {
      this.searchUrl.props = this.searchUrl.props.filter(i => i !== item);
      this.getSearchList(this.searchUrl)
    },
    // 8- 排序
    priceSort(order) {
      this.searchUrl.order = order;
      this.getSearchList(this.searchUrl)
    },
    // 9- 实现点击页码渲染对应数据
    toPageList(page) {
      this.searchUrl.pageNo = page;
      this.getSearchList(this.searchUrl)
    }
  },
  watch: {
    // Search 重新点击 搜索条件 不会执行 但是路由会改变 所以对路由进行监听
    // 让数据实时更新
    $route() {
      this.initSearchUrl()
      this.getSearchList(this.searchUrl)
    }
  },
  computed: {
    ...mapGetters('search', ['totalPages', 'total'])
  }
}
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;

  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>